<script setup>
import { updatePasswordByPhoneAysnc } from '@/api/user';
import commonForm from '@/components/commonForm.vue';

//表单回显数据
const optionData = ref({})
//表单配置项
const optionList = ref([
  {
    width: '140',
    data: {
      label: '手机号码',
      prop: 'phone',
    },
    component: 'verificationCode',
    $attrs: {
      placeholder: '请输入能够获取验证码的手机号码',
    }
  },
  {
    width: '140',
    data: {
      label: '验证码',
      prop: 'yzm'
    },
    component: 'el-input',
    $attrs: {
      placeholder: '请输入验证码'
    }
  },
  {
    width: '140',
    data: {
      label: '新密码',
      prop: 'password1',
    },
    component: 'el-input',
    $attrs: {
      placeholder: '请输入修改的新密码',
      type: 'password',
      'show-password': true
    }
  },
  {
    width: '140',
    data: {
      label: '确认新密码',
      prop: 'password2',
    },
    component: 'el-input',
    $attrs: {
      placeholder: '请输入再次修改的新密码',
      type: 'password',
      'show-password': true
    }
  },

])

//表单校验规则
const optionRuleList = ref({
  phone: [
    {
      required: true, message: '请输入手机号码！', trigger: 'blur'
    }
  ],
  yzm: [
    {
      required: true, message: '验证码不能为空！', trigger: 'blur'
    }
  ],
  password1: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (!value) return callback(new Error('请输入新密码！'))
        const reg = /^(?=.{6,16})(?=.*\d)(?=.*[A-Za-z]).*$/
        if (!reg.test(value)) {
          callback(new Error('新密码长度在6-16位且包含字母和数字!'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  password2: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请再次确认新密码！'))
        } else if (!formData.value.password2) {
          callback(new Error('请先输入新密码，然后再次确认新密码！'))
        } else if (formData.value.password2 !== value) {
          callback(new Error('两次输入的密码不一致！'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],


})
//表单
const formRef = ref(null)
//变化数据
const formData = ref({})
const updateFormData = (data) => {
  formData.value = data
}

//重置恢复表单
const handleReset = () => {
  formRef.value.resetForm()
}

//表单校验
const handleUpdate = () => {
  formRef.value.validForm(updatePassword)
}
//更新密码
const updatePassword = async () => {
  try {
    const params = {
      ...formData.value
    }
    const res = await updatePasswordByPhoneAysnc(params)
    if (res && res.code + '' === '200') {
      ElMessage.success('成功修改密码！')
      handleReset()
    }
  } catch (error) {
    console.log('%c [ error ]-181', 'font-size:13px; background:pink; color:#bf2c9f;', error)

  }
}



</script>


<template>
  <h3>密码修改</h3>

  <commonForm ref="formRef" :optionList="optionList" :optionRuleList="optionRuleList" :optionData="optionData"
    @updateFormData="updateFormData">
  </commonForm>


  <el-button class="login-btn" type="primary" @click="handleUpdate">
    确认修改
  </el-button>
</template>

<style lang="scss" scoped>
h3 {
  margin-bottom: 20px;
  -webkit-text-stroke: 1px rgb(215, 215, 215);
  -moz-text-stroke: 1px rgb(215, 215, 215);
  -o-text-stroke: 1px rgb(215, 215, 215);
  font-size: 36px;
  font-style: italic;
  letter-spacing: 5px;

  ::after {
    content: " ";
    height: 100%;
    width: 20px;

  }
}

:deep(.el-button) {
  font-size: 16px;
  font-weight: 400;
  width: 100px;
  color: #fff;
  border: 0px;
}

:deep(.el-card) {
  max-width: 500px;
  min-width: 400px;

  .card-header {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 2px;
    color: #717171
  }

  .card-footer {
    display: flex;
    justify-content: center;
  }
}

:deep(.el-input),
:deep(.el-select),
:deep(.el-input-number) {
  width: 240px;
}

.login-btn {
  color: #fff;
  width: 80%;
  border: #696d62;
  background-color: #363636;

  &:hover {
    background-color: #696d62;
  }
}
</style>